"use client";

import { type TAudioElement } from "platejs";
import { type PlateElementProps } from "platejs/react";

import { useMediaState } from "@platejs/media/react";
import { ResizableProvider } from "@platejs/resizable";
import { PlateElement, withHOC } from "platejs/react";

import { Caption, CaptionTextarea } from "./caption";

export const AudioElement = withHOC(
  ResizableProvider,
  function AudioElement(props: PlateElementProps&lt;TAudioElement&gt;) {
    const { align = "center", readOnly, unsafeUrl } = useMediaState();

    return (
      &lt;PlateElement {...props} className="mb-1"&gt;
        &lt;figure
          className="group relative cursor-default"
          contentEditable={false}
        &gt;
          <div>
            &lt;audio className="size-full" src={unsafeUrl} controls /&gt;
          </div>

          &lt;Caption style={{ width: "100%" }} align={align}&gt;
            &lt;CaptionTextarea
              className="h-20"
              readOnly={readOnly}
              placeholder="Write a caption..."
            /&gt;
          &lt;/Caption&gt;
        &lt;/figure&gt;
        {props.children}
      &lt;/PlateElement&gt;
    );
  },
);
